<template>
 <div class='gray-body w750' :class="commentList.length ? '' : 'white-bg' ">
    <van-tabs v-model="active" :swipe-threshold="6" :color="themes.color" :title-active-color="themes.color"  @change="switchType" sticky :offset-top='44'>
        <van-tab :title="item" v-for="(item, index) in navTab" :key="index">

                <div class='my-comments'>
                    <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="暂无更多"
                        @load="onLoad"
                        :immediate-check="false"
                        v-if="commentList && commentList.length"
                    >
                        <div class="item" v-for="(item, index) in commentList" :key="index" @click="goGoodsDet(item.prodId)">
                            <div class="pro-img"><img :src="$imgUrlHead + item.prodPic" alt=""></div>
                            <div class="pro-name">
                                <span  class="name">{{item.prodName}}</span>
                                <div class="goods-btn" v-if="item.commSts == 0">
                                    <span  class="btn cur" @click.stop="Comment(0,item.prodId,item.subItemId)" :style="{'color':themes.color, 'border-color': themes.color}">评价晒单</span>
                                </div>

                                <div class="goods-btn" v-if="item.isAddComm == true && item.commSts == 1">
                                    <span  class="btn" @click.stop="goComment(item.id)" :style="{'color':themes.color, 'border-color': themes.color}">查看评价</span>
                                </div>
                                <div class="goods-btn" v-if="item.isAddComm == false && item.commSts == 1">
                                    <span  class="btn " @click.stop="goComment(item.id)" :style="{'color':themes.color, 'border-color': themes.color}">查看评价</span>
                                    <span  class="btn cur" @click.stop="Addcomments(1,item.id)" v-if="(item.status !=0 && item.status != -1)" :style="{'color':themes.color, 'border-color': themes.color}">追加评论</span>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </div>


        </van-tab>
    </van-tabs>
    <Noempty :pic="require('../../assets/images/comment-empty.png')"  :title="'暂无评论'" v-if="Nomsg"/>
 </div>
</template>

<script>
import {userComments} from "api/comment";
import Noempty from 'components/Noempty/Noempty'
import {mapState} from 'vuex'
 export default {
   data () {
     return {
         
        navTab: ['待评论','已评论'],
        active: 0,
        commentType: 0,   //默认 0 未评价 1 已评价
        commentList: [],  //评论列表
        page: 1,   //页码
        finished: false,
        loading: false,
        total: null,
        Nomsg: false,
        isComment: 0,   // 默认0： 评价晒单 1：追加评论
     }
   },
   mounted () {
       let that = this

       if (sessionStorage.getItem('reviewStatus')) {
           this.commentType = parseInt(sessionStorage.getItem('reviewStatus'))
           this.active = parseInt(sessionStorage.getItem('reviewStatus'))
       }
       this.getComments(this.page,this.commentType)
   },
   methods: {
        goback() {
            this.$router.back();
            this.$router.isBack = true;
        },
        switchType(e) {
            this.commentType = e
            sessionStorage.setItem('reviewStatus',this.commentType)
            this.initialize()
            this.getComments(this.page , this.commentType)
        },
        //获取评论列表数据
        getComments(page,commentType) {
            userComments({
                curPageNO: page,
                state: commentType
            }).then( res => {
                if (res.status == 1) {
                    if (res.result.resultList) {
                        this.commentList = res.result.resultList
                        this.setTotal(res.result.total)
                    } else {
                        this.Nomsg = true
                    }
                } else {
                    this.setTotal(0)
                }
            })
        },
        onLoad() {
            setTimeout(() => {
                if (this.commentList.length >= this.total) {
                    this.loading = false
                    this.finished = true
                } else {
                    this.page = this.page + 1
                    userComments({
                        curPageNO: this.page,
                        state: this.commentType
                    }).then( res =>{
                        // if (res.status == 1) {
                            for (let i = 0; i < res.result.resultList.length; i++) {
                                this.commentList.push(res.result.resultList[i])
                            }
                            // 加载状态结束
                            this.loading = false;
                        // }
                    })
                }
            }, 500);
        },
        //初始化
        initialize() {
            this.commentList = []
            this.page = 1
            // this.active = parseInt(sessionStorage.getItem('status'))
            this.total = null
            this.Nomsg = false
            this.finished = false  //重置判断更多
        },
        //设置setTotal
        setTotal(total) {
            this.total = total
            if (total == 0) {
                this.Nomsg = true
            }
        },
        //查看订单详情
        goGoodsDet(prodId) {
            this.$router.push({
                path: `/goodsDetail`,
                query: {
                    goodsInfoId: prodId,
                }
            });
        },
        //查看评论
        goComment(id) {
            this.$router.push({
                path: `/commentsDetail`,
                query: {
                    id: id
                }
            });
        },
        //评论晒单，
        Comment(isComment,prodId,subItemId) {
            this.$router.push({
                path: `/writeComment`,
                query: {
                    isComment: isComment,
                    prodId: prodId,
                    subItemId: subItemId
                }
            });
        },
        //追加
        Addcomments(isComment,id) {
            this.$router.push({
                path: `/writeComment`,
                query: {
                    isComment: isComment,
                    id: id,
                }
            });
        }
   },
   computed: {
    ...mapState(['themes']),
   },
   components: {
       Noempty,

   }
 }
</script>

<style src="../../assets/css/comment-list.css" scoped></style>
